<template>
  <div class="life-background">
    <div class="life-background-picture" ref="backgroundPicture">
    </div>

    <div class="life-center">
      <div class="life-statics" id="detail-middle">
        <div class="title">
          统计图
        </div>
        <div class="content">
          <div class="data-des">
            <el-button @click="openNewDay">新增</el-button>
            <p>体重: sad </p>
            <p>钱: asdf </p>
            <p>头发: adsf</p>
          </div>

          <div class="statics">
            <Circle  :son-value="sonValue">
            </Circle>
          </div>

          <div class="hole-picture">

          </div>

          <div class="right-box">
            <div class="face-box">
              <div class="face-picture">
              </div>
              <div class="tag-box">
              </div>
            </div>

            <div class="ai-des">
              <div class="title">
                test
              </div>

              <div class="content">
                test
              </div>
            </div>

          </div>
        </div>
      </div>

      <div  v-for="item in data.dataList" :key="item.id">
           <OneDayModel ref="oneDayRef" :id="item.id" :src-list="item.srcList" :face-url="item.faceUrl"
                        :whole-url="item.wholeUrl" :item="item.item" :create-day="item.createDay" :ai-food="item.aiFood" @emitRefreshList="refreshLIst"></OneDayModel>
      </div>
    </div>
  </div>
    <lifeDialog  ref="newDialog" @refreshLIst="refreshLIst"></lifeDialog>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import 大背景 from "@/assets/images/生活记录大背景.jpg";
import Circle from "@/views/novel/character/components/middle/statistics/Circle.vue";
import type {CircleDataInter} from "@/type/novel/circle";
import OneDayModel from "@/views/club/life/Compent/OneDayModel.vue";
import lifeDialog from "@/views/club/life/Compent/lifeDialog.vue";
import {createOneLifeDayApi, getOneLifeDayListApi} from "@/api/modules/life/lifeDay";
import TagEidtDialog from "@/views/club/life/Compent/TagEidtDialog.vue";


let backgroundPicture = ref();
let oneDayRef =ref();
let newDialog =ref();
let data = reactive({
  dataList:[]

})

let sonValue = ref<CircleDataInter>({
  labels: ['代码', '游戏', '性', '学习', '沟通'],
  datasets: [
    {
      label: 'Pie Chart Example',
      data: [10, 20, 30, 30, 10], // 数据值 总数值为100
      backgroundColor: ['#FFCC99', '#99CCFF', '#FFFF99', '#FF99CC', '#CCFF99']
    }
  ],
  options: []
})

let openNewDay = ()=>{
  newDialog.value.openNewDialog()
}

let refreshLIst = ()=>{
  getOneLifeDayListApi(null).then(res=>{
    console.log('响应数据为', res);
    let rows = res?.data?.rows
    let targets = rows.map((item:any)=>{
      let oneDay = {}
      let OItem = {}
      OItem.cost =item.cost
      OItem.weight =item.weight
      OItem.hair =item.hair
      OItem.ski =item.ski

      oneDay.id = item.id
      oneDay.createDay = item.createDay
      oneDay.item = OItem
      oneDay.faceUrl =item.faceUrl
      oneDay.wholeUrl =item.wholeUrl
      oneDay.aiFood =item.ext2
      //,showPopover:false,mode:'view'
      item.item.map((src:any)=>{
        src.showPopover = false
        src.mode = 'view'
      })
      oneDay.srcList = item.item
      return oneDay
    })

    data.dataList = targets
    console.log('sdfasfwer阿斯顿发大水', targets);

  })
}

refreshLIst()


onMounted(() => {
  backgroundPicture.value.style.backgroundImage = 'url(' + 大背景 + ')';
  backgroundPicture.value.style.backgroundSize = '100% 100%'; // 强制缩放图片以填充元素
})


</script>


<style scoped lang="scss">
@use 'index.scss';

</style>